<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8" />
		<title>畅游在线考试系统</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"/>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			.title{
				background-color: #888888;
				color: white;
				font-family: "微软雅黑";
				font-size: 1.2em;
				text-align: center;
				padding: 5px 0;
			}
			.header{
				background-color: #888888;
				color: white;
				width: 100%;
				padding-top: 5px;
				padding-bottom: 8px;
			}
			.header span{
				color: #ffdd00;
			}
			.header .num{
				padding-left: 15px;
				display: inline-block;
			}
			.header .time{
				display: inline-block;
				float: right;
				padding-right: 15px;
			}
			.context{
				padding: 5px 25px;
				color: #888888;
				font-size: 1.2em;
			}
			.context .info{
				background-color: white;
				
				text-align: left;
			}
			.context .info div{
				display: inline-block;
			}
			.context .info .type{
				float: right;
			}
			
			.context .cont .requstion{
				padding: 15px 0;
				margin-bottom: 15px;
				text-indent:2.4em;
				height: 250px;
				overflow: auto;
				clear: both;
			}
			.context .cont .answer{
				padding: 15px 0;
			}
			
			
		</style>
		
	</head>
	<body>
		<div class="title">
			畅游在线考试系统 V1.0.0
		</div>
		<div class="header">
			<div class="num">
				共<span id="number">10</span>题，剩余<span id="lastNumber">10</span>题
			</div>
			<div class="time">
				剩余时间<span id="time">00:00:00</span>
			</div>
		</div>
		<div class="context">
			<div class="info">
				<div class="number">
					题号:<span>011</span>
				</div>
				<div class="type">
					题型:<span>单选</span>
				</div>
			</div>
			
			<div class="cont">
				<div class="requstion">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem odio deserunt incidunt numquam asperiores placeat vitae eligendi maiores ipsa ea repellat assumenda mollitia alias consectetur dolores porro delectus debitis ducimus ad laborum voluptatem animi velit quod tenetur dignissimos. Iste voluptas quaerat cupiditate eius mollitia cum qui nam voluptate ratione eligendi!
				</div>
				<div class="answer">
					<div class="answeritem">
						<input type="radio" name="answer" id="a" value="a"/><label for="a">答案A</label>
					</div>
					<div class="answeritem">
						<input type="radio" name="answer" id="b" value="b"/><label for="b">答案B</label>
					</div>
					<div class="answeritem">
						<input type="radio" name="answer" id="c" value="c"/><label for="c">答案C</label>
					</div>
					<div class="answeritem">
						<input type="radio" name="answer" id="d" value="d"/><label for="d">答案D</label>
					</div>
				</div>
				<div class="item">
					<button id="next" class="btn btn-block btn-default" >下一题</button>
				</div>
			</div>
		</div>
		
	</body>
</html>


<script type="text/javascript">
	$(function(){
		
		// 考试用时
		var time = 30*60;
		var hour = 0;
		var minute = 0;
		var second = 0;
		
		// 总共题数
		var count = 10;
		
		// 当前题
		var now = 0;
		
		// 时间戳
		var timeP;
		/***
		 * 初始化程序
		 */
		init();
		function init(){
			// 获取后端数据
			getQuest();
			
			$("#next").click(getQuest);
			
			// 程序进行
			setTime();
			timeP = setInterval(setTime, 1000);
		}
		
		/***
		 * 倒计时
		*/
		function setTime(){
			hour = Math.floor(time/60/60);
			minute = Math.floor(time/60)%60;
			second = Math.floor(time%60);
			$("#time").text(hour+":"+minute+":"+second);
			time--;
			if(time <0 ){
				clearInterval(timeP);
				timeOut();
			}
		}
		
		/***
		 * 交卷
		 */
		function timeOut(){
			location.href ="readme.html";
		}
		
		/**
		 * 获取题目
		 */
		function getQuest(){
			
			if($("#next").text()=="提交试卷"){
				timeOut();
			}else{
				// 通过ajax获取题目
				now++;
			}
			
			if(count-now <=0){
				$("#next").text("提交试卷");
			}
			
			$("#number").text(count);
			$("#lastNumber").text(count - now);
		}
		
		
		
	});
</script>